﻿<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
	<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css" />
	<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css" />
	<link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin" />
	<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css" />
	<title>报刊查询</title>
	<style>
		.myfont {
			font-size: 25px;
			line-height: 42px;
		}

		[v-cloak] {
			display: none;
		}
	</style>
</head>

<body>
	<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 报刊查询 <span
			class="c-gray en">&gt;</span> 查询</nav>
	<div class="page-container">
		<div class="text-c">
			<input type="text" v-model="keywords" placeholder="请输入要查询的信息关键字" style="width:250px" class="input-text">
			<span class="select-box inline">
				<select class="select" v-model="section">
					<option value="0">部门</option>
					<option value="1">人员</option>
					<option value="2">报刊</option>
				</select>
			</span>
			<button @click="search" class="btn btn-success" type="submit"><i class="Hui-iconfont">&#xe665;</i>
				搜索</button>
		</div>

		<div class="cl pd-5 bg-1 bk-gray mt-20 mystyle"> <span class="myfont"> <i
					class="Hui-iconfont myfont">&#xe627;</i>报刊订阅详情</span>
		</div>
		<div class="mt-20">
			<div class="mt-20">
				<table v-cloak
					class="table table-border table-bordered table-bg table-hover table-sort table-responsive">
					<thead>
						<tr class="text-c">
							<th v-for="(item, index) in objkey" :key="index">{{ item }}</th>
						</tr>
					</thead>
					<tbody>
						<tr class="text-c" v-for="(item, index) in resultlist" :key="index">
							<td v-for="(key, index) in objkey" :key="index">{{item[key]}}</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>


	</div>
	<!--_footer 作为公共模版分离出去-->
	<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
	<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
	<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script>
	<!--/_footer 作为公共模版分离出去-->

	<!--请在下方写此页面业务相关的脚本-->
	<script type="text/javascript" src="lib/My97DatePicker/4.8/WdatePicker.js"></script>
	<script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>
	<script src="lib/vue.js"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el: '.page-container',
			data: {
				resultlist: [],
				objkey: [],
				keywords: '',
				section: 0
			},
			methods: {
				search() {
					var _this = this;
					$.ajax({
						type: 'post',
						url: 'http://localhost:8080/search',
						data: {
							keywords: _this.keywords,
							section: _this.section
						},
						success(data) {
							if (data !== '请根据正确的对应关系进行查询' && data !== '未查询到对应的数据') {
								_this.resultlist = data
								_this.objkey = Object.keys(_this.resultlist[0])
							} else {
								layer.msg(data, {
									icon: 2,
									time: 1000
								})
							}
						},
						error(err) {
							layer.msg(err.message, {
								icon: 2,
								time: 1000
							})
						}
					})
				}
			},
		})
	</script>
</body>

</html>